<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>绘制视频</title>
	</head>
	<body>
		<canvas id="canvas" width="800" height="600"></canvas>
		<video width="800" height="" src="img/mov_bbb.mp4" controls="controls">
		</video>

		<script type="text/javascript">
			var video = document.querySelector("video")
			var canvas = document.querySelector("#canvas")

			var ctx = canvas.getContext('2d')
			var x = 50
			var y = 50
			video.onplay = function() {
				interId = setInterval(function() {
					ctx.clearRect(0, 0, 800, 600)
					ctx.fillRect(0, 0, 800, 600)
					ctx.drawImage(video, 0, 70, 800, 440)
					
					ctx.font = "30px 微软雅黑"
					ctx.strokeStyle = "pink"
					x+=2
					y+=4
					if(x>=800){
						x=0
					}
					if(y>=600){
						y=0
					}
					ctx.strokeText("小新打码",x,y)
				}, 16)
			}
			video.onpause = function() {
				clearInterval(interId)
			}
		</script>
	</body>
</html>
